﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../Scripts/jquery.js"></script>
<script type="text/javascript" src="../Scripts/Verify.js"></script>
<link href="../Styles/Public.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.btn {
	float: left;
	margin-right: 10px;
}
</style>
</head>
<body>
<h1>Ajax异步验证</h1>
<h2>概述</h2>
<div class="desc">
  <p>Verify.js所提供的验证方法，都是基于前端技术，针对一些需要与服务器端交互的验证，例如验证码、短信验证、登录验证等，需要接合Ajax的方式异步与服务器端交互，返回判断结果。
    根据判断结果，指定具体的某个控件校验证失败，并显示提示。</p>
  <p>相较于之前的验证方式（只用增加控件属性即可实现验证），Ajax的代码编写略显复杂，如果熟悉Javascrpt代码编写，其实也很简单。
    如下代码，是在指定的控件上显示错误提示信息。</p>
  <p>Verify.ShowBox($(&quot;form input[name=tbPhone]&quot;), &quot;该手机号未在系统中注册！&quot;);</p>
</div>
<h2>示例</h2>
<h3>1、Javascript单独验证某个控件</h3>
<div class="desc">
  <p>注意，下述代码中没有form标签，不再通过form的提交事件进行验证，而是手工编写Javascript代码对任一一个控件进行单独验证。 </p>
  <p>绿色的按钮只是一个普通的Div标签，只是样式像个按钮。</p>
  <fieldset>
    <pre>&lt;p&gt; 姓名：<br />      &lt;input name=&quot;name&quot; type=&quot;text&quot; size=&quot;6&quot; datatype=&quot;chinese&quot;
     place=&quot;right&quot; lenlimit=&quot;2-4&quot; alt=&quot;限2至4个中文字/符&quot;&gt;<br />      &lt;span&gt;（限中文）&lt;/span&gt; &lt;/p&gt;<br />    &lt;p&gt; 年龄：<br />      &lt;input type=&quot;text&quot;  name=&quot;age&quot; size=&quot;4&quot; datatype=&quot;uint&quot; nullable=&quot;false&quot; place=&quot;right&quot; /&gt;<br />    &lt;/p&gt;<br />    &lt;p&gt;<br />    &lt;div class=&quot;btn&quot; id=&quot;btn&quot;&gt;验证表单(div)&lt;/div&gt;<br />    &lt;/p&gt;<br />    &lt;script type=&quot;text/javascript&quot;&gt;<br />$(&quot;#btn&quot;).click(function(){<br />	if(Verify.IsPass($(&quot;input[type=text][name=name]&quot;))){<br />		alert(&quot;姓名录入合格&quot;);<br />	};<br />	if(Verify.IsPass($(&quot;input[type=text][name=age]&quot;))){<br />		alert(&quot;年龄录入合格&quot;);<br />	};<br />});<br />&lt;/script&gt;</pre>
    <p> 姓名：
      <input name="name" type="text" size="6" datatype="chinese" place="right" lenlimit="2-4" alt="限2至4个中文字/符">
      <span>（限中文）</span> </p>
    <p> 年龄：
      <input type="text"  name="age" size="4" datatype="uint" nullable="false" place="right" />
    </p>
    <p>
    <div class="btn" id="btn">验证表单(div)</div>
    </p>
    <script type="text/javascript">
$("#btn").click(function(){
	if(Verify.IsPass($("input[type=text][name=name]"))){
		alert("姓名录入合格");
	};
	if(Verify.IsPass($("input[type=text][name=age]"))){
		alert("年龄录入合格");
	};
});
</script>
  </fieldset>
</div>
<h3>2、Javascript批量验证控件</h3>
<div class="desc">
  <p>当点击按钮时，可以实现对form表单内的控件进行分组验证，全部通过则返回true，否则返回false。该过程不会触发form的submit事件。 </p>
  <p>form在此处可以仅仅作为一个容器。</p>
  <fieldset>
    <pre>&lt;form place=&quot;right&quot;&gt;<br />      &lt;p&gt; 账号：<br />        &lt;input name=&quot;&quot; type=&quot;text&quot; nullable=&quot;false&quot; datatype=&quot;user&quot; group=&quot;a&quot;/&gt;<br />        （a组） &lt;/p&gt;<br />      &lt;p&gt; 姓名：<br />        &lt;input name=&quot;&quot; type=&quot;text&quot; size=&quot;6&quot; datatype=&quot;chinese&quot; lenlimit=&quot;2-4&quot; group=&quot;b&quot; alt=&quot;限2至4个中文字/符&quot;&gt;<br />        &lt;span&gt;（b组）&lt;/span&gt; &lt;/p&gt;<br />      &lt;p&gt; 年龄：<br />        &lt;input type=&quot;text&quot; size=&quot;4&quot; datatype=&quot;uint&quot; nullable=&quot;false&quot; place=&quot;right&quot; group=&quot;a|b&quot;/&gt;<br />        （ab组） &lt;/p&gt;<br />      &lt;p&gt; 电话：<br />        &lt;input type=&quot;text&quot; datatype=&quot;mobile|tel&quot; nullable=&quot;false&quot; alt=&quot;请输入正确的电话号码&quot; group=&quot;b&quot;&gt;<br />        （b组） &lt;/p&gt;<br />      &lt;p&gt; 邮箱：<br />        &lt;input type=&quot;text&quot; datatype=&quot;email&quot; nullable=&quot;false&quot; /&gt;<br />        (没有组) &lt;/p&gt;<br />      &lt;p&gt;<br />      &lt;div class=&quot;btn&quot; id=&quot;btnA&quot;&gt;验证A组(div)&lt;/div&gt;<br />      &lt;div class=&quot;btn&quot; id=&quot;btnB&quot;&gt;验证B组(div)&lt;/div&gt;<br />      &lt;div class=&quot;btn&quot; id=&quot;btnAB&quot;&gt;验证AB组(div)&lt;/div&gt;<br />      &lt;div class=&quot;btn&quot; id=&quot;btnNull&quot;&gt;验证没有组(div)&lt;/div&gt;<br />      &lt;/p&gt;<br />      &lt;script type=&quot;text/javascript&quot;&gt;<br />$(&quot;#btnA&quot;).click(function(){<br />	if(Verify.IsPass($(&quot;form&quot;),&quot;a&quot;)){<br />		alert(&quot;a组验证通过&quot;);<br />	};	<br />});<br />$(&quot;#btnB&quot;).click(function(){<br />	if(Verify.IsPass($(&quot;form&quot;),&quot;b&quot;)){<br />		alert(&quot;b组验证通过&quot;);<br />	};	<br />});<br />$(&quot;#btnAB&quot;).click(function(){<br />	if(Verify.IsPass($(&quot;form&quot;),&quot;a|b&quot;)){<br />		alert(&quot;ab组验证通过&quot;);<br />	};	<br />});<br />$(&quot;#btnNull&quot;).click(function(){<br />	if(Verify.IsPass($(&quot;form&quot;))){<br />		alert(&quot;没有分组的控件验证通过&quot;);<br />	};	<br />});<br />&lt;/script&gt;<br />    &lt;/form&gt;</pre>
    <form place="right">
      <p> 账号：
        <input name="" type="text" nullable="false" datatype="user" group="a"/>
        （a组） </p>
      <p> 姓名：
        <input name="" type="text" size="6" datatype="chinese" lenlimit="2-4" group="b" alt="限2至4个中文字/符">
        <span>（b组）</span> </p>
      <p> 年龄：
        <input type="text" size="4" datatype="uint" nullable="false" place="right" group="a|b"/>
        （ab组） </p>
      <p> 电话：
        <input type="text" datatype="mobile|tel" nullable="false" alt="请输入正确的电话号码" group="b">
        （b组） </p>
      <p> 邮箱：
        <input type="text" datatype="email" nullable="false" />
        (没有组) </p>
      <p>
      <div class="btn" id="btnA">验证A组(div)</div>
      <div class="btn" id="btnB">验证B组(div)</div>
      <div class="btn" id="btnAB">验证AB组(div)</div>
      <div class="btn" id="btnNull">验证没有组(div)</div>
      </p>
      <script type="text/javascript">
$("#btnA").click(function(){
	if(Verify.IsPass($("form"),"a")){
		alert("a组验证通过");
	};	
});
$("#btnB").click(function(){
	if(Verify.IsPass($("form"),"b")){
		alert("b组验证通过");
	};	
});
$("#btnAB").click(function(){
	if(Verify.IsPass($("form"),"a|b")){
		alert("ab组验证通过");
	};	
});
$("#btnNull").click(function(){
	if(Verify.IsPass($("form"))){
		alert("没有分组的控件验证通过");
	};	
});
</script>
    </form>
  </fieldset>
</div>
<h3>3、通过Ajax回调，手动显示错误提示</h3>
<div class="desc">
  <p>注意，Ajax的调用必须是在http状态下。</p>
  <fieldset>
    <pre>&lt;p&gt; 姓名：<br />      &lt;input name=&quot;name2&quot; type=&quot;text&quot; size=&quot;6&quot; 
  datatype=&quot;chinese&quot; place=&quot;right&quot; lenlimit=&quot;2-4&quot; alt=&quot;请输入中文&quot;&gt;<br />      &lt;span&gt;（限中文）&lt;/span&gt; &lt;/p&gt;<br />   <br />    &lt;p&gt;<br />      &lt;div class=&quot;btn&quot; id=&quot;btnGet&quot;&gt;验证表单(div)&lt;/div&gt;<br />    &lt;/p&gt;<br />    &lt;script type=&quot;text/javascript&quot;&gt;<br />$(&quot;input[name=button2]&quot;).click(function(){<br />	$.get(&quot;1-1.htm&quot;,function(){<br />		<strong>Verify.ShowBox($(&quot;input[type=text][name=name2]&quot;),&quot;姓名已经存在&quot;);</strong><br />	});<br />});<br />&lt;/script&gt;</pre>
    <p> 姓名：
      <input name="name2" type="text" size="6" datatype="chinese" place="right" lenlimit="2-4" alt="请输入中文">
      <span>（限中文）</span> </p>
    <p>
      <div class="btn" id="btnGet">验证表单(div)</div>
    </p>
    <script type="text/javascript">
$("#btnGet").click(function(){
	$.get("1-1.htm",function(){
		Verify.ShowBox($("input[type=text][name=name2]"),"姓名已经存在");
	});
});
</script>
  </fieldset>
</div>
</body>
</html>
